import React, { FC, CSSProperties } from "react"
import { ITouchEvent, Text } from "@tarojs/components"
import clsx from "clsx"
import { pxTransform } from "@tarojs/taro"

interface IProps {
  /** iconfont name */
  icon: string
  /** icon color */
  color?: string
  /** icon font-size */
  size?: number | string
  /** class name */
  className?: string
  /** trigger when clicked */
  onClick?: (e: ITouchEvent) => void
  styles?: CSSProperties
}

const Icon: FC<IProps> = ({ icon, color, size, className, onClick, styles = {} }) => {
  const style: CSSProperties = {
    cursor: "pointer",
    ...styles
  }
  color && (style.color = color as typeof style.color)
  if (size) {
    if (typeof size === "number") {
      style.fontSize = pxTransform(size)
    } else {
      style.fontSize = size
    }
  }
  return <Text className={clsx("iconfont", icon, className)} style={style} onClick={onClick}></Text>
}
export default Icon
